<template>
  <div>
      用户名<input type="text" v-model="username" @blur="check_username"><span>{{username_msg}}</span><br>
      密码<input type="text" v-model="password"><br>
      邮箱<input type="text" v-model="email"><br>
      验证码<input type="text" v-model="code"><img :src="'http://127.0.0.1:8000/image?uuid='+uuid" @click="update_code()"><br>
    <div style="margin:0 auto; width:200px;height:50px" >
        <drag-verify 
            :width="width" 
            :height="height" 
            :text="text" 
            :text-size="textSize"
            :success-text="successText" ref="verify">
    </drag-verify>
    </div>
    
      
      <button @click="reg()" ref="reg">注册</button>
      
      
  </div>
</template>

<script>
import axios from 'axios'
import {guuid} from '../utils/uuid'
import dragVerify from 'vue-drag-verify'
export default {
    name:"register",
    components:{
    dragVerify
  },
    data() {
        return {
            width:200,
            height:40,
            text:"将滑块移动到右边",
            successText:"成功了",
            textSize:"15",
            username:"",
            password:"",
            email:"",
            code:"",
            username_msg:"",
            uuid:guuid(),
        }
    },methods: {
        
        guid(){
                return  'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,  function(c)  {     
                var  r  =  Math.random() * 16 | 0,
                    v  =  c  ==  'x'  ?  r  :  (r & 0x3 | 0x8);        
                return  v.toString(16);    
            });
        },
        update_code(){
            this.uuid = guuid()
        },
        check_username(){
            //用户名长度验证，长度最多8位，最少2位
            // var reg = /^\w{2,8}$/
            // if(reg.test(this.username)){
            //     alert("验证通过")
            // }else{
            //     alert("验证失败")
            // }
                  
            var data = {
                username:this.username
            }
            axios({
                url:"http://127.0.0.1:8000/check",
                method:"post",
                data:data
            }).then(resp=>{
                console.log(resp.data.msg)
                this.username_msg = resp.data.msg
            })
        },
        reg(){
        
            if(!this.$refs.verify.isPassing){
                alert("请滑动滑块")
            }
           
            console.log(this.uuid)
            //滑块验证，是否拖动到右边
            var data={
                "username":this.username,
                "password":this.password,
                "email":this.email,
                "code":this.code,
                "uuid":this.uuid,
            }
            axios({
                url:"http://127.0.0.1:8000/register",
                method:"post",
                data:data
            }).then(resp=>{
                console.log(resp.data)
                alert("注册成功")
            })
        },
    },
}
</script>

<style>

</style>